<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="注册common.css">
    <link rel="stylesheet" href="注册.css">
    <script src="../ajax/jquery-3.5.1.min.js"></script>
<style>
    header {
        background-color: #333;
        color: #fff;
        text-align: center;
    }
    h1 {
        margin: 0;
    }
    main {
        padding: 20px;
    }
    .profile {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }
    .profile img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin-right: 20px;
    }
    .profile h2 {
        margin: 0;
    }
    .info {
        margin-bottom: 20px;
    }
    .info label {
        font-weight: bold;
    }
    .info p {
        margin: 0;
    }
    .button {
        background-color: #333;
        color: #fff;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    .button:hover {
        background-color: #555;
    }
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .modal {
        background-color: #fff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        max-width: 400px;
        text-align: center;
    }
    .modal h2 {
        margin-top: 0;
    }
    .modal p {
        margin-bottom: 20px;
    }
    .modal button {
        background-color: #333;
        color: #fff;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
</style>
    <title>Document</title>
</head>
<body>
<div class="shortcut">
    <div class="wrapper">
        <i class="avatar"></i>
        <ul>
            <li><a href="登录login.html" id="top">您好！请先登录</a></li>
            <li><a href="注册导航.html">免费注册</a></li>
            <li><a href="index.html">主页</a></li>
            <li><a href="ShopCar.html">购物车</a></li>
            <li><a href="#">收货中心</a></li>
            <li><a href="homePage.html">个人中心</a></li>
            <li><a href="视觉介绍.html"><span></span>官网</a></li>
        </ul>
    </div>
</div>
<header>
    <h1>个人中心</h1>
</header>
<div>
    <main>
        <div class="profile">
            <img src="img/nike2.png" alt="Profile Picture">
            <h2>John Doe</h2>
        </div>
        <div class="info">
            <label>邮箱：</label>
            <p>johndoe@example.com</p>
        </div>
        <div class="info">
            <label>年龄：</label>
            <p>30</p>
        </div>
        <div class="info">
            <label>性别：</label>
            <p>男</p>
        </div>
    </main>
    <div class="chose_head">
        <h3>点击更改头像：JPG/GIF</h3>
        <form name="form0" id="form0">
            <input type="file" name="file0" id="file0" multiple="multiple" /><br>
            <img src="img/shop.jpg" id="img0" style="width: 20rem;height: 15rem;">
        </form>
    </div>
    <button class="button">编辑个人信息</button>
</div>
<div class="overlay">
    <div class="modal">
        <h2>欢迎访问我们的网站</h2>
        <p>这是一个页面弹窗的示例</p>
        <button onclick="closeModal()">关闭</button>
    </div>
</div>

<script>
    $("#file0").change(function(){
        let objUrl = getObjectURL(this.files[0]) ;//获取文件信息
        console.log("objUrl = "+objUrl);
        if (objUrl) {
            $("#img0").attr("src", objUrl);
        }
    }) ;
    function getObjectURL(file) {
        let url = null;
        if (window.createObjectURL!=undefined) {
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
    function closeModal() {
        let overlay = document.querySelector('.overlay');
        overlay.style.display = 'none';
    }
    </script>
</body>
</html>





